<template>
  <div class="detail-component">
    <div class="tab-left-contain">
      <div
        v-for="(item, index) in detailTitle"
        :key="index"
        :class="activeIndex == index ? 'titleActive' : 'titleCustom'"
        @click="activeIndex = index"
      >
        <svg-icon
          :icon-class="activeIndex == index ? item.activeIcon : item.icon"
          style="font-size: 18px"
        ></svg-icon>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="info-right-contain">
      <el-card>
        <div v-show="activeIndex == 0">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon>基本配置
          </div>
          <el-form label-width="100px" class="setDevice-form">
            <div class="formItem-contain">
              <el-form-item label="电源状态">
                <el-select v-model="devOnOff" placeholder="请选择">
                  <el-option
                    v-for="item in devOnOffList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="运行模式">
                <el-select v-model="devRunMode" placeholder="请选择">
                  <el-option
                    v-for="item in devRunModeList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>

            <div class="formItem-contain">
              <el-form-item label="设置温度">
                <el-select v-model="devTemp" placeholder="请选择">
                  <el-option
                    v-for="item in devTempList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="网络锁定">
                <el-select v-model="devKeyLock" placeholder="请选择">
                  <el-option
                    v-for="item in devKeyLockList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="童锁">
                <el-select v-model="devchildLock" placeholder="请选择">
                  <el-option
                    v-for="item in devchildLockList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
          </el-form>
        </div>
        <div v-show="activeIndex == 1">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon>定时配置
          </div>
          <SetintervalSet></SetintervalSet>
        </div>
        <div v-if="activeIndex == 2">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon>高级参数
          </div>
          <AdvancedParameters></AdvancedParameters>
        </div>
        <!-- <div v-show="activeIndex == 3">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon>人存配置
          </div>
          <el-form label-width="210px" class="setDevice-form" :inline="true">
            <div class="formItem-contain">
              <el-form-item label="传感器无人判定时间">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                ></el-input-number>
                <div class="form-num-unit">分钟</div>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="传感器无人判定距离">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="无人判定后制热模式工作状态">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
            <div class="formItem-contain">
              <el-form-item label="无人判定后制冷模式工作状态">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="btn-search">确定</el-button>
            </div>
          </el-form>
        </div> -->
        <div v-if="activeIndex == 3">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon>后台配置
          </div>
          <backendSetting></backendSetting>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import AdvancedParameters from "./control/AdvancedParameters.vue";
import SetintervalSet from "./control/setIntervalSet.vue";
import backendSetting from "./control/backendSetting.vue";
export default {
  name: "DeviceDetailComponent",
  data() {
    return {
      detailTitle: [
        {
          name: "基本配置",
          icon: "deviceInfoLog063678",
          activeIcon: "deviceInfoLogffffff",
        },
        {
          name: "定时配置",
          icon: "deviceLog063678",
          activeIcon: "deviceLogffffff",
        },
        {
          name: "高级参数",
          icon: "deviceParamLog063678",
          activeIcon: "deviceParamLogffffff",
        },
        // {
        //   name: "人存配置",
        //   icon: "deviceSetLog063678",
        //   activeIcon: "deviceSetLogffffff",
        // },
        {
          name: "后台配置",
          icon: "deviceLevelLog063678",
          activeIcon: "deviceLevelLogffffff",
        },
      ],
      num: 1,
      activeIndex: 0,
      devOnOff: "1", //设备开关机
      devOnOffList: [],
      devRunMode: "1", // 设备运行模式
      devRunModeList: [],
      devTemp: "20℃", // 设备温度
      devTempList: [],
      devKeyLock: "0", // 设备网络锁定
      devKeyLockList: [],
      devchildLock: "0", // 设备童锁
      devchildLockList: [],
    };
  },
  components: { AdvancedParameters, SetintervalSet, backendSetting },
  props: {
    activeIndexComponent: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    activeIndexComponent(val) {
      this.activeIndex = 0;
    },
  },
  mounted() {
    this.loadDictData("sys_switch_status", "devOnOffList");
    this.loadDictData("sys_devMode_2", "devRunModeList"); // 运行模式需要根据传过来的devType决定
    this.loadDictData("sys_devKey_lock", "devKeyLockList");
    this.loadDictData("sys_devChild_lock", "devchildLockList");
    for (let i = 5; i <= 85; i++) {
      this.devTempList.push({
        label: `${i}℃`, // 显示带单位
        value: `${i}℃`,
      });
    }
  },
  methods: {
    handleChange() {},
    async loadDictData(dictType, targetProperty) {
      try {
        // 调用 store 中的字典查询方法，传入字典类型
        const data = await this.$store.dispatch("dict/queryDictData", dictType);
        // 根据接口返回的数据格式进行处理
        this[targetProperty] = [{ dictLabel: "所有", dictValue: "" }, ...data];
      } catch (error) {
        this.$message.error("获取数据失败");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.detail-component {
  display: flex;
}
.tab-left-contain {
  width: 160px;
  height: 100%;
  margin-right: 50px;
  .titleActive,
  .titleCustom {
    cursor: pointer;
    margin: 0 auto;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid #063678;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .titleActive {
    width: 160px;
    background-color: #063678;
    color: #fff;
    line-height: 50px;

    span {
      padding-left: 10px;
    }
  }
  .titleCustom {
    width: 145px;
    color: #063678;
    line-height: 40px;
    background-color: #fff;
    span {
      padding-left: 10px;
    }
  }
}

.info-right-contain {
  width: 860px;
  min-height: 50vh;
  max-height: 70vh;
  overflow: auto;

  .tab_activeName_title {
    font-weight: 700;
    color: #063678;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
</style>
<style lang="scss">
.setDevice-form {
  min-height: 45vh;
  max-height: 60vh;
  overflow: auto;
  .formItem-contain {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .el-form-item {
      width: 600px;
      margin-right: 20px;
      padding: 0;
      position: relative;
      .form-num-unit {
        position: absolute;
        top: 0;
        right: 36px;
      }
    }
  }
  .el-input-number--medium,
  .el-select {
    width: 100%;
  }
}
</style>
